<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ergo</title>
  <!-- 引入bootstrap框架文件 -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
  <!-- 引入animate.css文件 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">
  <!-- 引入初始化文件 -->
  <link rel="stylesheet" href="./assets/css/reset.css">
  <!-- 引入公共样式 -->
  <link rel="stylesheet/less" href="./assets/css/common.less">
  <!-- 引入index本页样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less">
  <!-- 引入百度地图 -->
  <script src="//api.map.baidu.com/api?v=2.0&ak=xsbPms8UcU65W5NrwMENdNLO64AMrbpj"></script>
</head>

<body>
  <!-- header头部 -->
  <header class="header">
    <div class="menu glyphicon glyphicon-list wow fadeInUp" data-wow-delay="100ms"></div>
    <div class="logo wow fadeInUp" data-wow-delay="200ms"></div>
    <div class="search glyphicon glyphicon-search wow fadeInUp" data-wow-delay="300ms"></div>
  </header>

  <!-- banner -->
  <div class="banner" id="banner">
    <img src="./assets/images/banner.png" alt="" class="img-responsive">
  </div>

  <!-- risk -->
  <div class="risk" id="risk">
    <div class="title">
      风险评估
    </div>
    <!-- 图片列表 -->
    <div class="iconlist">
      <div class="item wow fadeInUp" data-wow-delay="100ms">
        <div class="icon bg1"></div>
        <div class="name">办公室</div>
      </div>
      <div class="item wow fadeInUp" data-wow-delay="200ms">
        <div class="icon bg2"></div>
        <div class="name">工业</div>
      </div>
      <div class="item wow fadeInUp" data-wow-delay="300ms">
        <div class="icon bg3"></div>
        <div class="name">个人/家具</div>
      </div>
      <div class="item wow fadeInUp" data-wow-delay="400ms">
        <div class="icon bg4"></div>
        <div class="name">其他行业</div>
      </div>
    </div>
    <!-- 盒子 -->
    <div class="boxlist">
      <div class="box wow fadeInUp " data-wow-delay="500ms">
        <img src="./assets/images/box_bg1.png" alt="" class="img-responsive">
      </div>
      <div class="box wow fadeInUp" data-wow-delay="600ms">
        <h3>专业咨询</h3>
        <h5>个人咨询</h5>
        <h5>企业咨询</h5>
      </div>
      <div class="box wow fadeInUp" data-wow-delay="700ms">
        <img src="./assets/images/box_bg2.png" alt="" class="img-responsive">
      </div>
      <div class="box wow fadeInUp" data-wow-delay="800ms">
        <h3>专业咨询</h3>
        <h5>个人咨询</h5>
        <h5>企业咨询</h5>
      </div>
      <div class="box wow fadeInUp" data-wow-delay="900ms">
        <img src="./assets/images/box_bg3.png" alt="" class="img-responsive">
      </div>
      <div class="box wow fadeInUp" data-wow-delay="1s">
        <h3>专业咨询</h3>
        <h5>个人咨询</h5>
        <h5>企业咨询</h5>
      </div>
    </div>
  </div>

  <!-- human -->
  <div class="human" id="human">
    <div class="title">人体工学介绍和应用</div>

    <!-- remork -->
    <div class="remork wow fadeInUp" data-wow-delay="100ms">
      <!-- 背景 -->
      <div class="back">
        <h3>人体工学介绍</h3>
        <div class="cate">
          <div class="ls"> <a href="#">历史</a> </div>
          <div class="xz"> <a href="#">现在</a> </div>
          <div class="jl"> <a href="#">将来</a> </div>
        </div>


      </div>
    </div>

    <!-- use -->
    <div class="use">
      <div class="professional wow fadeInUp" data-wow-delay="100ms">
        <span></span>
        <h3>职业应用</h3>
      </div>
      <div class="personal wow fadeInUp" data-wow-delay="200ms">
        <span></span>
        <h3>个人/居家应用</h3>
      </div>
    </div>

    <!-- other -->
    <div class="other wow fadeInUp" data-wow-delay="300ms">
      <span></span>
      <h3>其他应用</h3>
    </div>
  </div>

  <!-- contact -->
  <div class="contact" id="contact">
    <div class="title">联系我们</div>
    <div class="message">
      <div class="one wow fadeInUp" data-wow-delay="100ms">
        <span class="glyphicon glyphicon-earphone"></span>
        <div class="phone">+86 15217196291</div>
      </div>
      <div class="two">
        <div class="left wow fadeInUp" data-wow-delay="200ms">
          <span class="glyphicon glyphicon-credit-card"></span>
          <div class="tel">01-706-506-3604</div>
        </div>
        <div class="right wow fadeInUp" data-wow-delay="300ms">
          <span class="glyphicon glyphicon-envelope"></span>
          <div class="email">ergo168@qq.com</div>
        </div>
      </div>
      <div class="three wow fadeInUp" data-wow-delay="400ms">
        <span class="glyphicon glyphicon-map-marker"></span>
        <div class="address">广州市天河区珠江新城珠江西路高德置地D座15楼</div>
      </div>
    </div>
    <div class="map wow fadeInUp" id="map" data-wow-delay="500ms"></div>
  </div>

  <!-- foot -->
  <div class="foot">
    <a class="item" href="#banner">
      <div class="icon">
        <img src="./assets/images/home.png" alt="">
      </div>
      <div class="uname">首页</div>
    </a>
    <a class="item" href="#human">
      <div class="icon">
        <img src="./assets/images/about.png" alt="">
      </div>
      <div class="uname">关于我们</div>
    </a>
    <a class="item" href="#risk">
      <div class="icon">
        <img src="./assets/images/srik.png" alt="">
      </div>
      <div class="uname">风险评估</div>
    </a>
    <a class="item" href="#contact">
      <div class="icon">
        <img src="./assets/images/user.png" alt="">
      </div>
      <div class="uname">用户中心</div>
    </a>
  </div>
</body>

</html>
<!-- 引入less.js 文件 -->
<script src="./assets/js/less.min.js"></script>
<!-- 引入jquery文件 -->
<script src="./assets/js/jquery.js"></script>
<!-- 引入bootstrap.js文件 -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 滚动视觉差插 -->
<script src="./assets/js/parallax.min.js"></script>
<!-- 引入wow.js文件 -->
<script src="assets/js/wow.min.js"></script>
<!-- 实例化wow -->
<script>
  new WOW().init();
  //创建百度地图对象
  var map = new BMap.Map("map");

  // 初始化地图,设置中心点坐标和地图级别
  // 113.26197, 23.10379 经纬度
  //12 级别 级别越大 看的越近
  map.centerAndZoom(new BMap.Point(113.26197, 23.10379), 12);

  //添加地图的控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes: [
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP,
    ]
  }));

  map.setCurrentCity("广州");  // 设置地图显示的城市 此项是必须设置的

  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>